<template>
  <div class="hmnavbar">
    <van-nav-bar>
      <!-- 左侧的箭头 -->
      <template #left>
        <i
          @click="$router.push(path)"
          class="iconfont iconbtn_nav_back myicon"
        ></i>
      </template>
      <!-- 中间的文本 -->
      <template #title>
        <h3>{{ title }}</h3>
      </template>
      <!-- 右侧的保存按钮 -->
      <template #right>
        <span @click="mysave" v-if="showBtn">保存</span>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  // path: 跳转的路由
  // title：导航的标题
  // showBtn: boolean 值用来按钮保存的显示与隐藏
  props: ['title', 'path', 'showBtn'],
  methods: {
    // 点击右侧的保存按钮时触发
    mysave () {
      // 调用父组件中的方法
      // 子组件向外暴露了一个方法： mysave
      // 将来父组件在使用子组件时可以实现这个方法
      this.$emit('mysave')
      // this.$parent.update()
    }
  }
}
</script>

<style lang="less" scoped>
.hmnavbar {
  .myicon {
    font-size: 44px;
  }
}
</style>
